<template>
    <div class="contentDefault">
        <div class="selectList">
          <button class="searchBtn" type="button" @click="newTab">+&nbsp;&nbsp;添加</button>
          <div class="operate-cont">
            <!--<a class="oper-btn" href="javascript:;" @click="inviteBind(task)">-->
              <!--<span class="oper-icons bind-icon"></span>-->
              <!--<span>邀请绑定</span>-->
            <!--</a>-->
            <!--<a class="oper-btn" href="javascript:;" @click="unBind(task)">-->
              <!--<span class="oper-icons unbind-icon"></span>-->
              <!--<span>解除绑定</span>-->
            <!--</a>-->
            <a class="oper-btn" href="javascript:;" @click="editGuider(task)">
              <span class="oper-icons edit-icon"></span>
              <span>编辑</span>
            </a>
            <a class="oper-btn" href="javascript:;" @click="deleGroup(task)">
              <span class="oper-icons dele-icon"></span>
              <span>删除</span>
            </a>
          </div>
        </div>
        <div class="datas-box" v-if="listBox">
          <div class="left-cont">
            <table class="table table-bordered table-hover" ref="guiderTable" id="guiderTable">
              <thead>
              <tr class="active">
                <th>姓名</th>
                <th>电话</th>
                <th>性别</th>
                <th>信用评级</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(val,index) in guiderList" @click="getGuiderInfos(val)">
                <td><span>{{val.name || '未设置'}}</span></td>
                <td><span>{{val.mobile || '未设置'}}</span></td>
                <td><span>{{val.gender || '未设置'}}</span></td>
                <td>
                  <p v-if="val.star.length">
                    <img class="star-img" v-for="item in val.star" :src="item" alt=""/>
                  </p>
                  <p v-else>未设置</p>
                </td>
              </tr>
              </tbody>
            </table>
            <FootPage :Pieces="pieces" :PiecePage="pageNum" :Page="pages" v-on:current-page="currentPage"></FootPage>
          </div>
          <div class="detail-box">
            <div class="detail-head">详细信息</div>
            <div class="detal-content">
              <div>姓名：{{guiderInfos.name || '未设置'}}</div>
              <div>电话：{{guiderInfos.mobile || '未设置'}}</div>
              <div>性别：{{guiderInfos.gender || '未设置'}}</div>
              <div>地区：{{guiderInfos.area || '未设置'}}</div>
              <div>派团次数：{{guiderInfos.tuanTotal || 0}}次</div>
              <div>
                <p class="inline-element">信用评级：</p>
                <p class="inline-element" v-if="guiderInfos.star">
                  <img class="star-img" v-for="item in guiderInfos.star" :src="item" alt=""/>
                </p>
                <p class="inline-element" v-else>未设置</p>
              </div>
              <!--<div>绑定日期：</div>-->
              <div>护照编号：{{guiderInfos.passportSn || '未设置'}}</div>
              <div>身份证编号：{{guiderInfos.idSn || '未设置'}}</div>
              <div>游证编号：{{guiderInfos.guideSn || '未设置'}}</div>
              <div>备注：{{guiderInfos.demo || '未设置'}}</div>
            </div>
          </div>
        </div>
        <div class="NoData" v-if="NoData">
            对不起，没有数据
        </div>
    </div>
</template>
<script>
    import FootPage from '@/components/public/footpage'
    export default {
      data(){
        return {
          // 数据控制显示模块
          NoData:false, // 没有数据的时候的模块 默认隐藏
          listBox:true, // 数据列表模块 默认显示
          Http:'',// 数据接口连接】
          pieces:'',//数据总数
          pageNum:'',//每页数据条数
          pages:'',//当前页码
          SubNav:'导游管理',
          title:'',//标题,
          guiderList:'', // 列表数据
          guiderInfos: {},
          task: {},
          DelHttp: '',
          bindHttp: '',
          empty_star: '',
          star: ''

        }
      },
      props:['subNav'],
      watch:{
        subNav: function(val) { // 二级导航数据
          this.pagination(window.location.href,1)
          this.pages=this.paginations(1);
          this.port(); //获取对应的二级导航数据
        }
      },
      computed:{
        guiderListUrl(){
          return this.$store.state.interface.guiderList;
        },
        deleteUrl () {
          return this.$store.state.interface.deleteGuider;
        },
        bindGuiderUrl () {
          return this.$store.state.interface.bindGuider;
        }

      },
      filters: {},
      methods:{
        newTab(){
          this.$store.commit('NEW_GUIDER_TAB',{
            title:'添加',
            components:'GuiderProNew'
          });
        },
        editGuider(task){
          if (task.id) {
            this.$store.commit('NEW_GUIDER_TAB',{
              title:'编辑',
              components:'GuiderProEdit',
              dataId:task.id,
            });
          } else {
            layer.msg('请选择要编辑的导游！');
          }
        },
        deleGroup(task){
          if (task.id) {
            let formData = new FormData();
            let self = this;
            let deleteUrl = this.DelHttp;
            formData.append('id', task.id);
            layer.confirm(`确定删除${task.name}导游？`, {
              btn: ['确定','取消'] //按钮
            }, function(){
              self.$ajax.post(deleteUrl, formData).then(function(res){
                let code = res.data.code;
                if(code === '10000'){
                  layer.msg('删除成功!');
                  self.$nextTick(() => {
                    self.port(); //获取的数据
                  });
                } else{
                  layer.msg('删除失败!');
                }
              });
            }, function(){
              // 取消
            });
          } else {
            layer.msg('请选择要删除的导游！');
          }
        },
        inquire(){//查询
          let self = this;
          if(self.trigger){
            self.trigger=false;
            self.pagination(window.location.href,1)
            self.pages=self.paginations(1);

            self.port(); //获取对应的数据
            self.triggerTime=setTimeout(function(){
              self.trigger=true;
            },1500)
          }
        },
        currentPage: function(msg){
          this.pages = msg;
          if(this.title==''){
            this.pagination(window.location.href,msg)
            this.pages=this.paginations(this.pages);
          }
          this.port(); //获取对应页码数据
        },
        // 星星数目显示
        rankStars (star_num, stars=[]) {
          let self = this;
          let empty_star_num = 5 - star_num;
          if (star_num > 0) {
            for (let i = 0; i < star_num; i++) {
              stars.push(self.star);
            }
            if (empty_star_num * 1 !== 0) {
              for (let i = 0; i < empty_star_num; i++) {
                stars.push(self.empty_star);
              }
            }
          }
          return stars;
        },
        // 获取数据函数port()
        port(){
          let self = this;
          layer.load(2);
          let formData =new FormData(); // 基础信息表单数据
          formData.append('pageId', self.pages);
          formData.append('size', self.pageNum);

          self.$ajax.post(self.Http,formData).then(function(res){
            layer.closeAll('loading');
            let code = res.data.code;
            let result = res.data.result;
            if(code === '10000' && result['WbGuide.list'].amount * 1 > 0){
              self.NoData = false;
              self.listBox = true;
              self.guiderList = result['WbGuide.list'].list
              self.pieces = result['WbGuide.list'].amount;
              self.guiderInfos = self.guiderList[0];
              for (let item of self.guiderList) {
                item.star = self.rankStars(item.rank*1);
              }
              // 详情里星星数量显示
              let infoRank = self.guiderInfos.rank*1;
              for (let i = 0;i<infoRank;i++) {
                self.guiderInfos.star = self.rankStars(infoRank);
              }
              self.$nextTick(() => {
                $('.datas-box').height($(document).height());
                $('.left-cont').height($(document).height());
                $('.detail-head').height($('#guiderTable thead').height());
                $('#guiderTable tr').each(function () {
                  $(this).on('click', function () {
                    $(this).addClass('click-active');
                    $(this).siblings().removeClass('click-active');
                  })
                });
              });
            } else{
              // 没有数据或者数据错误
              self.NoData = true;
              self.listBox = false;
              self.pieces = 0;
              self.codes(code);
            }

          },function(res){
            layer.closeAll('loading');
            layer.msg('服务器错误！')
            self.pieces=0;
          })
        },
        // inviteBind (task) {
        //     let self = this;
        //   if (task.id) {
        //     layer.confirm('确定邀请绑定'+task.name+'？', {
        //       btn: ['确定','取消'] //按钮
        //     }, function(){
        //       if (task.travelGencyId) {
        //         layer.msg('该导游已经绑定过！');
        //       } else {
        //         self.bindPost(task.id, task.id);
        //         self.port();
        //         setTimeout(() => {
        //           self.$router.go(0);
        //         }, 300)
        //       }
        //     }, function(){
        //       // 取消
        //     });
        //   } else {
        //     layer.msg('请选择要绑定的导游！');
        //   }
        // },
        // unBind (task) {
        //   let self = this;
        //   if (task.id) {
        //     layer.confirm('确定解除绑定'+task.name+'？', {
        //       btn: ['确定','取消'] //按钮
        //     }, function(){
        //       if (task.travelGencyId) {
        //         self.bindPost(task.id, '');
        //         setTimeout(() => {
        //           self.$router.go(0);
        //         }, 300)
        //       } else {
        //         layer.msg('该导游已经解绑过！');
        //       }
        //     }, function(){
        //       // 取消
        //     });
        //   } else {
        //     layer.msg('请选择要解绑的导游！');
        //   }
        // },
        // 获取详情
        getGuiderInfos (val) {
          let self = this;
          if (val) {
            self.guiderInfos = val;
            self.task = val;
            // 详情里星星数量显示
            let infoRank = this.guiderInfos.rank*1;
            for (let i = 0;i<infoRank;i++) {
              this.guiderInfos.star = this.rankStars(infoRank);
            }
          }
        }
        // bindPost (id, travelGencyId) {
        //   let self = this;
        //   let formData =new FormData();
        //   formData.append('id', id);
        //   formData.append('travelGencyId', travelGencyId);
        //   self.$ajax.post(self.bindHttp, formData).then(function(res){
        //     if (res.data.code === '10000' && travelGencyId * 1 !== 0) {
        //       layer.msg('绑定成功!');
        //       self.$nextTick(() => {
        //         self.port(); //获取的数据
        //       });
        //     } if (res.data.code === '10000' && travelGencyId * 1 === 0) {
        //       layer.msg('解绑成功!');
        //       self.$nextTick(() => {
        //         self.port(); //获取的数据
        //       });
        //     }
        //   });
        // }
      },
      beforeMount(){
        let url = this.guiderListUrl;
        let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
        this.Http = `${url}?sid=${sessionId}`;
        this.DelHttp = `${this.deleteUrl}?sid=${sessionId}`;//删除
        this.bindHttp = `${this.bindGuiderUrl}?sid=${sessionId}`;
        this.pageNum = this.$store.state.pageNum;
        // 页码
        this.pages=this.paginations(this.pages);
        // 调用获取数据函数port()
        this.port();
      },
      mounted(){},
      components:{
        FootPage
      }
    }
</script>
<style lang="scss" scoped>
    /*表格*/
    .datas-box{
      display:box; /*（伸缩盒最老版本） */
      display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
      display:-webkit-flex; /* Chrome */
      display:-moz-box;     /* Firefox 19 */
      display:-ms-flexbox;
      display:flex;  /*flex容器*/
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      background: #fff;
      border: 1px solid #ddd;
    }
    .left-cont{
      width: 76%;
      margin: 10px;
    }
    .footpage{border: none!important;}
    .detail-box{
      width: 24%;
      background: #fff;
      border-left: 1px solid #ddd;
      overflow-y: auto;
    }
    .detal-content{padding: 10px 14px;}
    .detal-content div{padding-bottom: 14px;}
    .table-bordered{
      border-left: none!important;
      border-right: none!important;
    }
    .table-bordered{
      td{
        /*vertical-align: inherit!important;*/
        /*display: inline-block;*/
      }
        .link{
            span{
                word-wrap:break-word ;
                word-break:break-all;
            }
        }
    }
  .detail-head{
    background: #09ba79;color: #fff;
    padding: 0 14px;
    line-height: 33px;
    font-size: 14px;
  }
    .oper-btn{color: #09ba79;margin-right: 10px;}
    .oper-btn:last-child{margin-right: 0;}
    .selectList{padding: 14px 12px;}
    .operate-cont{float: right;}
    .oper-btn{float: left;margin-top: 10px;margin-right: 18px;}
    .oper-btn:last-child{margin-right: 0;}
    .oper-icons{
      float: left;
      width: 15px;
      height: 16px;
      background: url("../../assets/images/delete2.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 4px;
    }
    .edit-icon{
      background: url("../../assets/images/edit_icon.png") no-repeat;
      background-size: 100% 100%;
    }
    .unbind-icon{
      background: url("../../assets/images/unbind_icon.png") no-repeat;
      background-size: 100% 100%;
    }
    .bind-icon{
      background: url("../../assets/images/bind_icon.png") no-repeat;
      background-size: 100% 100%;
    }
    tr.click-active{
      background: #f5f5f5;
    }
    img.star-img{
      display: inline-block;width: 14px;margin-right: 2px;
    }
    .inline-element{display: inline-block;}

</style>
